<template>
  <div class="member">
    <div class="columns">
      <div class="column is-one-quarter">
        <el-card shadow="never">
          <div slot="header" class="has-text-centered">
            <el-avatar :size="64" :src="`${thisUser.userIdStr}`" />
            <p class="mt-3">
              {{ thisUser.userAlias || thisUser.userAccount }}
            </p>
          </div>
          <div>
            <p class="content">
              入驻：{{
                dayjs(thisUser.userCreateTime).format("YYYY/MM/DD HH:MM:ss")
              }}
            </p>
            <p class="content">简介：{{ thisUser.userBio }}</p>
          </div>
        </el-card>
      </div>

      <div class="column">
        <!--用户发布的话题-->
        <el-card class="box-card content" shadow="never">
          <div slot="header" class="has-text-weight-bold">
            <span>话题</span>
          </div>


          <!--分页-->
          <pagination
            v-show="page.total > 0"
            class="mt-5"
            :total="page.total"
            :page.sync="page.current"
            :limit.sync="page.size"
            @pagination="fetchUserById"
          />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getInfoById } from "@/api/user";
import pagination from "@/components/Pagination/index";
import { mapGetters } from "vuex";
export default {
  name: "Profile",
  components: { pagination },
  data() {
    return {
      thisUser: {},
      // topics: {},
      page: {
        current: 1,
        size: 5,
        total: 0,
      },
    };
  },
  computed: {
    ...mapGetters(["token", "user"]),
  },
  created() {
    this.fetchUserById();
  },
  methods: {
    fetchUserById() {
      getInfoById(
        this.$route.params.userIdStr,
        this.page.current,
        this.page.size
      ).then((res) => {
        const { data } = res;
        this.thisUser = data.user;
      });
    },

  },
};
</script>

<style scoped>
</style>
